<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻详情</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 精确匹配图片的导航样式 */
        .nav-primary {
            background: #0066CC;
            height: 60px;
            padding: 0 28px;
        }
        .system-brand {
            font-size: 20px;
            font-weight: 600;
            color: white;
            margin-right: 40px;
            line-height: 60px;
        }
        .nav-item-custom {
            position: relative;
            margin-right: 35px;
        }
        .nav-item-custom:not(:last-child)::after {
            content: "";
            position: absolute;
            right: -18px;
            top: 50%;
            transform: translateY(-50%);
            width: 1px;
            height: 14px;
            background: rgba(255,255,255,0.3);
        }
        .nav-link-custom {
            color: white !important;
            font-size: 16px;
            padding: 0 !important;
            line-height: 60px;
        }
    </style>
</head>
<body>
    <!-- 精确还原图片的导航栏 -->
    <nav class="nav-primary navbar">
        <div class="container-fluid">
            <span class="system-brand">新闻系统</span>
            <div class="d-flex">
                <ul class="navbar-nav flex-row">
                    <li class="nav-item-custom nav-item">
                        <a class="nav-link-custom nav-link" href="/root_home.html">首页</a>
                    </li>
                    <li class="nav-item-custom nav-item">
                        <a class="nav-link-custom nav-link" href="/add_class.html">添加分类</a>
                    </li>
                    <li class="nav-item-custom nav-item">
                        <a class="nav-link-custom nav-link" href="/release_news.html">发布新闻</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <div class="card shadow">
            <div class="card-body">
                <!-- 新闻标题 -->
                <h1 class="card-title mb-4" id="newsTitle"></h1>
                
                <!-- 元数据 -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <p class="text-muted">发布时间：<span id="newsTime" class="fw-bold"></span></p>
                    </div>
                    <div class="col-md-6">
                        <p class="text-muted">发布作者：<span id="newsAuthor" class="fw-bold"></span></p>
                    </div>
                    <div class="col-12">
                        <p class="text-muted">分类：<span id="newsCategory" class="badge bg-primary"></span></p>
                    </div>
                </div>

                <!-- 新闻内容 -->
                <div class="border-top pt-3">
                    <pre id="newsBody" class="p-3 bg-light rounded" 
                         style="white-space: pre-wrap; max-height: 60vh; overflow-y: auto"></pre>
                </div>

                <!-- 操作按钮 -->
                <div class="d-flex justify-content-end gap-3 mt-4">
                    <button class="btn btn-danger" onclick="handleDelete()">删除新闻</button>
                    <a id="editBtn" class="btn btn-primary">编辑新闻</a>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 获取新闻ID
        const getNewsId = () => new URLSearchParams(window.location.search).get('news_id')

        // 加载新闻数据
        const loadNews = async () => {
            const newsId = getNewsId()
            if (!newsId) return alert('缺少新闻ID')

            try {
                // 获取元数据
                const metaRes = await fetch('/get_one_news', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ news_id: newsId })
                })
                const { title, time, class: category, publisher, path } = await metaRes.json()

                // 获取内容
                const contentRes = await fetch(path)
                const content = await contentRes.text()

                // 渲染数据
                document.getElementById('newsTitle').textContent = title
                document.getElementById('newsTime').textContent = time.trim()
                document.getElementById('newsAuthor').textContent = publisher
                document.getElementById('newsCategory').textContent = category
                document.getElementById('newsBody').textContent = content
                document.getElementById('editBtn').href = `/modify_news.html?news_id=${newsId}`

            } catch (error) {
                console.error('加载失败:', error)
                alert('新闻加载失败')
            }
        }

        // 删除处理
        const handleDelete = async () => {
            if (!confirm('确定永久删除该新闻？')) return
            
            try {
                const res = await fetch('/erase_news', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ news_id: getNewsId() })
                })
                
                if (res.ok) {
                    alert('删除成功')
                    window.location.href = '/root_home.html'
                } else {
                    throw new Error('删除失败')
                }
            } catch (error) {
                console.error('删除错误:', error)
                alert('删除操作失败')
            }
        }

        // 初始化
        window.onload = loadNews
    </script>
</body>
</html>